<template xmlns="http://www.w3.org/1999/html">
  <div class="user-info-card">
    <div class="card">
      <div class="avatar">
        <img :src="info.avatar" :alt="name" />
      </div>
      <div class="card-content">
        <h2>{{ info.name }}</h2>
        <p><b>邮箱:</b> {{ info.email }}</p>
        <p><b>性别:</b> {{ info.gender }}</p>
        <p>
          <div class="bio_card">
            {{ info.bio }}
          </div>
        </p>
      </div>
      <div class="card-actions" v-if="true">
        <el-button @click="goToEditPage">编辑信息</el-button>
        <el-button @click="dialogFormVisible = true">修改密码</el-button>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">

    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="code">

        <el-input v-model="ruleForm.code" class="code" placeholder="验证码"></el-input>
        <el-button type="primary" class="code_button" @click="sendCode">获取验证码</el-button>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input v-model="ruleForm.checkPass" placeholder="请再次输入密码"></el-input>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updatepass" type="primary" >确定</el-button>
        <el-button  @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import { getUserInfo, updatePass, updatePassGetCode} from "@/http/api";
import { useRoute } from 'vue-router';
import router from "@/router";

import {ElMessage, type FormInstance, type FormRules} from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const dialogFormVisible = ref(false)

const info = reactive({
  name:'',
  email:'',
  gender:'',
  bio:'这个人很懒没有介绍',
  avatar:''
})
const route = useRoute();
const userId = ref(route.params.userid);
const avatarurl = "/src/assets/img/avatar/"

const showbutton = ref(localStorage.getItem("userid")!==null)

onMounted(()=>{
  getUserInfo({uid:userId.value}).then((res)=>{
    info.name = res.data.name==null?'':res.data.name
    info.email = res.data.email==null?'':res.data.email
    info.gender = res.data.gender==null?'':res.data.gender
    info.bio = res.data.bio==null?'这个人很懒没有介绍':res.data.bio
    info.avatar = res.data.avatar==null?'':avatarurl+res.data.avatar
  })
})

function goToEditPage() {
  router.push('/updateuserinfo/'+userId.value)
}


const ruleForm = reactive({
  password: '',
  checkPass: '',
  email:'',
  code:'',
})




const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])|(?=.*[a-z])(?=.*\d)|(?=.*[A-Z])(?=.*\d).{8,12}$/;
    if (!passwordRegex.test(ruleForm.password)) {
      callback(new Error("密码由大小写字母、数字两位及以上组成长度在8-12位"))

    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一样"))
  } else {
    callback()
  }
}
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
const email = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else {
    if (!emailRegex.test(ruleForm.email)) {
      callback(new Error("邮箱格式错误"))
    }
    callback()
  }
}

const code = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else {
    if (ruleForm.code.length!=6||!/^\d+$/.test(ruleForm.code)) {
      callback(new Error("验证码格式错误"))
    }
    callback()
  }
}

const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  email: [{ validator: email, trigger: 'blur' }],
  code: [{ validator: code, trigger: 'blur' }],
})

const sendCode = () => {
  if (ruleForm.email==''||ruleForm.email==null){
    ElMessage.error("请输入邮箱")
    return
  }
  if (!emailRegex.test(ruleForm.email)) {
    ElMessage.error("邮箱格式错误")
    return;
  }
  updatePassGetCode({email:ruleForm.email}).then((res)=>{
    if (res.code==10000){
      ElMessage.success("验证码已发送")
    }else{
      ElMessage.error("验证码发送失败")
    }
  })
}

const updatepass = () => {
  updatePass({email:ruleForm.email,code:ruleForm.code,password:ruleForm.password}).then((res)=>{
    if (res.code==10000){
      ElMessage.success("修改成功")
      dialogFormVisible.value = false
    }else{
      ElMessage.error("修改失败")
    }
  })
}

const cancel = () => {
  ruleForm.email = ''
  ruleForm.password = ''
  ruleForm.checkPass = ''
  ruleForm.code = ''
  dialogFormVisible.value = false
}

</script>

<style scoped>
.user-info-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 615px;
}

.card {
  width: 60vw;
  height: 60vh;
  padding: 50px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);

}

.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.card-content {
  margin-bottom: 15px;
}

.card-actions {
  text-align: right;
}

.bio_card{
  width: 50%;
  min-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  padding: 10px;
  word-wrap: break-word; /* 允许长单词或URL在边界处换行 */
  white-space:pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 这里的5表示最多显示5行 */
}

.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 如果你想让按钮右对齐 */
  align-items: center; /* 垂直居中对齐 */
  /* 如果需要，可以添加间距 */
  /* margin-left: auto; 可以使第一个按钮左对齐，第二个按钮靠右 */
}

</style>